<template lang="pug">
  .pageTabs.tabCardWrapper
    el-card(:body-style="{padding: '0'}")
      el-tabs(v-model="curTab" @tab-click="tabClick" v-if="tabs.length > 0")
        el-tab-pane(v-for="tab in tabs.filter(x => !!x.meta.title)" :key="tab.key" :label="tab.meta.title" :name="tab.key")
    router-view(v-flex)
    //- slot(:componentId="curTab")
</template>
<script>
import { mapGetters } from 'vuex'

function getNavNode (list, val, tabs) {
  const mapList = list => {
    list.map(x => {
      if (x.meta && x.meta.pid === val) {
        tabs.push(x)
      } else {
        if (x.children) {
          mapList(x.children)
        }
      }
    })
  }
  mapList(list)
}

export default {
  computed: {
    ...mapGetters(['addRouters'])
  },
  props: {
    // 父路由名称
    name: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      curTab: '',
      tabs: []
    }
  },
  created () {
    if (this.name) {
      getNavNode(this.addRouters, this.name, this.tabs)
      console.log(this.tabs)
      // 判断当前路由是否是父路由，如果是，重定向到第一个子路由
      if (this.tabs.length && this.$route.name === this.name) {
        this.$router.push({ path: this.tabs[0].path })
      }
    }
    this.curTab = this.$route.name
  },
  methods: {
    tabClick (tab) {
      this.$router.push({ name: tab.name })
      this.$emit('tabClick', tab.name)
    }
  }
}
</script>
<style lang="scss" scoped>
.tabCardWrapper{

  /deep/ .el-tabs__header{
    margin: 0
  }
}
</style>
